<script setup>
import useDialog from '@/hooks/use-dialog'
import {
  validate50WordsRequired,
  validate20WordsRequired,
  validate200Words,
  validatePhoneRequired
} from '@/utils/form-validate'
import { saveUserMockApi } from '@/api/mock-js/system/user-api'
import { listRoleMockApi } from '@/api/mock-js/system/role-api'
import { onMounted } from 'vue'

defineOptions({
  name: 'DialogUser'
})

const modelValue = defineModel({type: Boolean})

const emit = defineEmits(['on-close'])

const formData = reactive({
  id: undefined,
  username: '',
  nickName: '',
  realName: '',
  password: '',
  phone: '',
  roleIds: [],
  remarks: ''
})

const {
  formRef,
  title,
  preTitle,
  loadData,
  save,
  saveFlag,
  close,
  setInitData,
  quickSubmit
} = useDialog(emit, formData, modelValue)
defineExpose({
  preTitle, title, formData, setInitData
})

const rules = {
  username: {required: true, validator: validate20WordsRequired, trigger: 'blur'},
  nickName: {required: true, validator: validate50WordsRequired, trigger: 'blur'},
  realName: {required: true, validator: validate20WordsRequired, trigger: 'blur'},
  phone: {required: true, validator: validatePhoneRequired, trigger: 'blur'},
  remarks: {trigger: 'blur', validator: validate200Words}
}

// 获取用户list
const roleList = ref([])
const getRoleList = async () => {
  try {
    const res = await listRoleMockApi({})
    roleList.value = res.data
  } catch (e) {
    throw new Error(e)
  }
}
onMounted(() => {
  getRoleList()
})
</script>

<template>
  <DialogForm :model-value="modelValue" :title="`${preTitle}用户${title}`" :id="formData.id" v-model:saveFlag="saveFlag"
              align-centers width="620px" :loading="loadData.loading" @on-save="save(saveUserMockApi, '用户')"
              @on-close="close"
              @on-cancel="close">
    <ElForm ref="formRef" :model="formData" v-loading="loadData.loading" :rules="rules" label-width="80px" size="large"
            @keyup.enter.prevent="e => quickSubmit(e, () => save(saveUserMockApi, '用户'))">
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="账号" prop="username">
            <ElInput v-model="formData.username" placeholder="请输入账号"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="昵称" prop="nickName">
            <ElInput v-model="formData.nickName" placeholder="请输入昵称"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="姓名" prop="realName">
            <ElInput v-model="formData.realName" placeholder="请输入姓名"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="电话" prop="phone">
            <ElInput v-model="formData.phone" placeholder="请输入联系电话"/>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElFormItem label="角色" prop="roleIds">
        <ElSelect v-model="formData.roleIds" multiple placeholder="请分配角色">
          <ElOption v-for="{ id, roleName } in roleList" :key="id" :label="roleName" :value="id"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="备注" prop="remarks">
        <ElInput type="textarea" rows="1" v-model="formData.remarks"/>
      </ElFormItem>
    </ElForm>
  </DialogForm>
</template>
